<template>
  <el-menu
    :default-active="this.$route.path"
    router
    mode="horizontal"
    class="nav-menu"
    @select="handleSelect"
    background-color="#409EFF"
    text-color="#fff"
    active-text-color="#fff"
  >
    <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">{{ item.navItem }}</el-menu-item>
  </el-menu>
</template>
<script>
export default {
  name: "navMenu",
  data() {
    return {
      activeIndex2: "1",
      navList: [
        { name: "/", navItem: "首页管理" },
        { name: "/classify", navItem: "分类管理" },
        { name: "/shopping", navItem: "购物车管理" },
        { name: "/user", navItem: "用户管理" },
      ]
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>
<style>
.nav-menu .el-submenu__title i {
  color: #fff;
}
</style>